<template>
    <view class="city-list">
        <text>其他城市</text>
        <view class="city-section" v-for="(item, index) in cityList" :key="index">
            <text :id="item.letter" class="city-section-title" v-if="item.letter">{{ item.letter }}</text>

            <view class="city-name" @tap="selectCity" :data-cityname="item.name" v-for="(item, index1) in item.cities" :key="index1">
                <text>{{ item.name }}</text>
            </view>
        </view>
    </view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	
export default {
    data() {
        return {
            currentCity: '厦门市',
            alphabet: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),

            cityList: [
                // 示例城市列表数据
            ],

            selectedCity: ''
        };
    },
    methods: {
        scrollToLetter(e) {
            // 保持这个功能不变
            const letter = e.currentTarget.dataset.letter;
            const query = uni.createSelectorQuery();
            query.select(`#${letter}`).boundingClientRect();
            query.selectViewport().scrollOffset();
            query.exec(function (res) {
                console.log(res);
                uni.pageScrollTo({
                    scrollTop: res[0].top + res[1].scrollTop - 30,
                    duration: 300
                });
            });
        },

        // 新增函数处理城市选择
        selectCity(e) {
            const selectedCity = e.currentTarget.dataset.cityname;
            // 使用 my.navigateBack 返回并传递参数
            uni.navigateBack({
                delta: 1,
                // 返回上一级
                success: function () {
                    const pages = getCurrentPages();
                    const prevPage = pages[pages.length - 2]; // 上一个页面
                    // 将选中的城市更新到第一个页面的 selectedCity 变量中
                    prevPage.setData({
                        selectedCity: selectedCity
                    });
                }
            });
        }
    }
};
</script>
<style>
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f5f5;
}

.nav-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.nav-title {
    font-size: 18px;
}

.current-location {
    padding: 10px;
    background-color: #ffffff;
    margin-bottom: 10px;
}

.location {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.location-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.city-list {
    flex: 1;
    overflow-y: scroll;
    background-color: #ffffff;
}

.city-section {
    padding: 10px;
    font-style: center;
}

.city-section-title {
    padding-left: 10px;
    color: #888888;
    font-weight: bold;
}

.city-name {
    padding-left: 20px;
    padding-top: 5px;
}

.quick-nav {
    position: fixed;
    right: 10px;
    top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quick-nav text {
    padding: 5px 0;
    color: #007aff;
    cursor: pointer;
    font-size: 12px;
}

</style>
